﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Title and other stuffs -->
    <title>Customer Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="content/style/bootstrap.css">
    <!-- Font awesome icon -->
    <link rel="stylesheet" href="content/style/font-awesome.css">
    <!-- jQuery UI -->
    <link rel="stylesheet" href="content/style/jquery-ui.css">
    <!-- Calendar -->
    <link rel="stylesheet" href="content/style/fullcalendar.css">
    <!-- Star rating -->
    <link rel="stylesheet" href="content/style/rateit.css">
    <!-- Date picker -->
    <link rel="stylesheet" href="content/style/bootstrap-datetimepicker.min.css">
    <!-- jQuery Gritter -->
    <link rel="stylesheet" href="content/style/jquery.gritter.css">
    <!-- Bootstrap toggle -->
    <link rel="stylesheet" href="content/style/bootstrap-toggle-buttons.css">
    <!-- Main stylesheet -->
    <link href="content/style/style.css" rel="stylesheet">
    <link href="content/style/app.css" rel="stylesheet" type="text/css" >
    <!-- Widgets stylesheet -->
    <link href="content/style/widgets.css" rel="stylesheet">
    <!-- Responsive style (from Bootstrap) -->
    <link href="content/style/bootstrap-responsive.css" rel="stylesheet">
    <!-- HTML5 Support for IE -->
    <!--[if lt IE 9]>
        <script src="js/lib/html5shim.js"></script>
    <![endif]-->
    <!-- Favicon -->
    <link rel="shortcut icon" href="content/img/favicon/favicon.ico">
</head>
<body>
    <div class="navbar navbar-fixed-top navbar-inverse hide">
        <div class="navbar-inner">
            <div class="container">
                <!-- Menu button for smallar screens -->
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a>
                <!-- Site name for smallar screens -->
                <a href="#" class="brand"><span class="bold">Hansen</span> Tech</a>
                <!-- Navigation starts -->
                <div class="nav-collapse collapse">
                    <!-- Links -->
                    <ul class="nav pull-right">
                        <li class="dropdown pull-right"><a data-toggle="dropdown" class="dropdown-toggle"
                            href="#">
                            <img src="content/img/user.png" alt="" class="nav-user-pic" />
                            <label id="lblUsername">Admin</label> <b class="caret"></b></a>
                            <!-- Dropdown menu -->
                            <ul class="dropdown-menu">
                                <li><a href="#"><i class="icon-user"></i>Profile</a></li>
                                <li><a href="#" data-toggle="modal" data-target="#dlgHubIconsSettings"><i class="icon-cogs"></i>Settings</a></li>
                                <li><a href="#login"><i class="icon-off"></i>Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!-- Notifications -->
                    <ul class="nav pull-right">
                        <!-- Comment button with number of latest comments count -->
                        <li class="dropdown dropdown-big"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                            <i class="icon-comments"></i>Chats <span class="badge badge-info">6</span> </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <!-- Heading - h5 -->
                                    <h5>
                                        <i class="icon-comments"></i>Chats</h5>
                                    <!-- Use hr tag to add border -->
                                    <hr />
                                </li>
                                <li>
                                    <!-- List item heading h6 -->
                                    <a href="#">Hi :)</a> <span class="label label-warning pull-right">10:42</span>
                                    <div class="clearfix">
                                    </div>
                                    <hr />
                                </li>
                                <li><a href="#">How are you?</a> <span class="label label-warning pull-right">20:42</span>
                                    <div class="clearfix">
                                    </div>
                                    <hr />
                                </li>
                                <li><a href="#">How can I make you happy?</a> <span class="label label-warning pull-right">
                                    14:42</span>
                                    <div class="clearfix">
                                    </div>
                                    <hr />
                                </li>
                                <li>
                                    <div class="drop-foot">
                                        <a href="#">View All</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <!-- Message button with number of latest messages count-->
                        <li class="dropdown dropdown-big"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                            <i class="icon-envelope-alt"></i>Inbox <span class="badge badge-important">6</span>
                        </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <!-- Heading - h5 -->
                                    <h5>
                                        <i class="icon-envelope-alt"></i>Messages</h5>
                                    <!-- Use hr tag to add border -->
                                    <hr />
                                </li>
                                <li>
                                    <!-- List item heading h6 -->
                                    <a href="#">My box doesn't work now.</a>
                                    <!-- List item para -->
                                    <p>
                                        My TV shows 'Please check the smartcard'...</p>
                                    <hr />
                                </li>
                                <li><a href="#">Can I suspend my product?</a>
                                    <p>
                                        I'll go to travel for 3 months, can I su...</p>
                                    <hr />
                                </li>
                                <li>
                                    <div class="drop-foot">
                                        <a href="#">View All</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- Main content starts -->
    <div class="content hide">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="sidebar-dropdown">
                <a href="#">Navigation</a></div>
            <div class="sidebar-inner">
                <!-- Search form -->
                <div class="sidebar-widget">
                    <div class="form-inline">
                        <div class="input-append row-fluid">
                            <input id="searchName" type="text" class="span8" placeholder="Search" list="customerNames">
                            <datalist id="customerNames"> 
                            </datalist>
                            <button id="btnSearch" class="btn btn-info">
                                Search</button>
                        </div>
                    </div>
                </div>
                <!--- Sidebar navigation -->
                <!-- If the main navigation has sub navigation, then add the class "has_submenu" to "li" of main navigation. -->
                <ul class="navi">
                    <!-- Use the class nred, ngreen, nblue, nlightblue, nviolet or norange to add background color. You need to use this in <li> tag. -->
                    <li class="nred current"><a href="#dashboard"><i class="icon-desktop"></i>Dashboard</a></li>

                    <!-- Menu with sub menu -->
                    <li class="has_submenu nlightblue">
                      <a href="#">
                        <i class="icon-bar-chart"></i> Finance
                        <span class="pull-right"><i class="icon-angle-right"></i></span>
                      </a>

                      <ul>
                        <li><a href="#ft"><i class="icon-dollar"></i>&nbsp;&nbsp;Transactions</a></li>
                        <li><a><i class="icon-money"></i>Invoices</a></li>
                      </ul>
                    </li>
                      <!-- Menu with sub menu -->
                    <li class="has_submenu norange">
                      <a href="#">
                        <i class="icon-th"></i> Marketing
                        <span class="pull-right"><i class="icon-angle-right"></i></span>
                      </a>
                      <ul>
                        <li class="norange"><a href="#communication"><i class="icon-phone-sign"></i>Communication</a></li>
                      </ul>                      
                    </li>
                </ul>
                <!-- Date -->
                <div class="sidebar-widget">
                    <div id="todaydate">
                    </div>
                </div>
            </div>
        </div>
        <!-- Sidebar ends -->
        <!-- Main bar -->
        <div class="mainbar" id="mainbar">
        </div>
    </div>
    <!-- Content ends -->

    <!-- Notification box starts -->
   <div class="slide-box hide">
        <div class="slide-box-head bred">
          <div class="pull-left">User Tools</div>          
          <div class="slide-icons pull-right">
            <a href="#" class="sminimize"><i class="icon-chevron-down"></i></a> 
         </div>
          <div class="clearfix"></div>
        </div>

        <div class="slide-content">
          <!-- It is default bootstrap nav tabs. See official bootstrap doc for doubts -->
            <ul class="nav nav-tabs">
              <!-- Tab links -->
              <li class="active"><a href="#tab1" data-toggle="tab"><i class="icon-phone"></i></a></li>
              <li><a href="#tab2" data-toggle="tab"><i class="icon-link"></i></a></li>
            </ul>

            <!-- Tab content -->                
            <div class="tab-content">

              <div class="tab-pane active" id="tab1">

                <!-- Graph #1 -->
                <div class="slide-data">
                  <div class="slide-data-text">Open Contacts</div>
                  <div class="slide-data-result">10&nbsp;<i class="icon-comment green"></i> </div>
                  <div class="clearfix"></div>
                  <hr />
                  <span id="todayspark4" class="spark"></span>
                </div>

                <!-- Graph #2 -->
                <div class="slide-data">
                  <div class="slide-data-text">Unresolved Contacts</div>
                  <div class="slide-data-result">3&nbsp;<i class="icon-comment red"></i> </div>
                  <div class="clearfix"></div>
                  <hr />
                  <span id="todayspark5" class="spark"></span>
                </div>                

              </div>

              <div class="tab-pane" id="tab2">
                <a>
                    <i class="icon-comments"></i>
                    Chat box
                </a>
                <a>
                    <i class="icon-book"></i>
                    Knowledge center
                </a>
              </div>
            </div>
        </div>          
    </div>
    <!-- Notification box ends -->   

    <div id="addressModal" class="modal hide fade dashboard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

    <div id="dlgHubIconsSettings" class="modal hide fade dashboard" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">         
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Hub Icons Setting</h3>
          </div>
          <div class="modal-body">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label for="" class="control-label">Address:</label>
                        <div class="controls">
                            <div class="icons-button" id="tbtnAddress">
                                <input id="toogle-checkbox" type="checkbox" value="value1" checked="checked">
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label for="" class="control-label">Relationship:</label>
                        <div class="controls">
                            <div class="icons-button" id="tbtnRelationship">
                                <input id="toogle-checkbox" type="checkbox" value="value1" checked="checked">
                            </div>
                        </div>
                    </div>                        
                    <div class="control-group">
                        <label for="" class="control-label">Notes:</label>
                        <div class="controls">
                            <div class="icons-button" id="tbtnNotes">
                                <input id="toogle-checkbox" type="checkbox" value="value1" checked="checked">
                            </div>
                        </div>
                    </div>                                                
                </form>                    
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="btnApplySettings">Apply</button>
          </div>
    </div>


    <div id="loginPage" class="admin-form hide" aria-hidden="true">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span12">
            <!-- Widget starts -->
                <div class="widget worange">
                  <!-- Widget head -->
                  <div class="widget-head">
                    <i class="icon-lock"></i> Login 
                  </div>

                  <div class="widget-content">
                    <div class="padd">
                      <!-- Login form -->
                      <form class="form-horizontal">
                        <!-- User -->
                        <div class="control-group">
                          <label class="control-label" for="inputUser">User</label>
                          <div class="controls">
                            <input type="text" id="inputUser" placeholder="User name" value="iccadmin">
                          </div>
                        </div>
                        <!-- Password -->
                        <div class="control-group">
                          <label class="control-label" for="inputPassword">Password</label>
                          <div class="controls">
                            <input type="password" id="inputPassword" placeholder="Password">
                          </div>
                        </div>
                        <!-- Remember me checkbox and sign in button -->
                        <div class="control-group">
                          <div class="controls">
                            <label class="checkbox">
                              <input type="checkbox" id="inputRememberMe"> Remember me
                            </label>
                            <br>
                            <a id="btnLogin" class="btn btn-danger">Sign in</a>
                            <button type="reset" class="btn">Reset</button>
                          </div>
                        </div>
                      </form>
                    </div>
                    <div class="widget-foot">
                      Not Registred? <a>Register here</a>
                    </div>
                  </div>  
               </div>
          </div>
        </div> 
      </div>
    </div>


    <!-- Scroll to top -->
    <span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span>

        <script type="text/template" id="mainbarTemplate">
            <!-- Page heading -->
            <div class="page-head">
                <h2 class="pull-left">
                        <span class="button va-text-top dropdown dropdown-tiny">
                            <a class="dropdown-toggle blightblue" href="#" data-toggle="dropdown">
                                <i class="icon-chevron-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <form class="form-horizontal">
                                        <div class="control-group">
                                            <label for="" class="control-label">Customer ID:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Id %>">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Language:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.Language %>">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Customer since:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= moment(Details.RegisteredDate).format('MM/DD/YYYY') %>">
                                            </div>                        
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Market segment:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.MarketSegment %>">
                                            </div>                        
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Business Unit:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.BusinessUnit %>">
                                            </div>                        
                                        </div> 
                                        <div class="control-group">
                                            <label for="" class="control-label">Dealer:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.Dealer %>">
                                            </div>                        
                                        </div> 
                                        <div class="control-group">
                                            <label for="" class="control-label">Distributor:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.Distributor %>">
                                            </div>                        
                                        </div> 
                                        <div class="control-group">
                                            <label for="" class="control-label">Invoice Profile:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.InvoiceProfile %>">
                                            </div>                        
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Account type:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.AccountType %>">
                                            </div>                        
                                        </div>
                                        <div class="control-group">
                                            <label for="" class="control-label">Payment method:</label>
                                            <div class="controls">
                                                <input type="text" readonly value="<%= Details.PaymentMethod %>">
                                            </div>                        
                                        </div>
                                    </form>
                                </li>
                            </ul>
                        </span>
                    <%= Details.FirstName %>&nbsp;<%= Details.Surname%>
                    <span class="page-meta"><%= Details.Meta %></span>
                </h2>                
                <div id="hub-icons" class="hubicons pull-right">
                    <h2>
                        <% var hubIcons = dashboard.getHubIcons(); 
                           for(var i=0, l=hubIcons.length; i< l; i++) { 
                            var hi = hubIcons[i],
                                customerId = dashboard.currentCustomer.Id,
                                url = hi.Link ? ("#customer/" + customerId +"/" + hi.Link) : '#';                            
                        %>
                            <a href="<%= url %>">
                                <i class="<%= hi.Icon %>" title="<%= hi.Title %>"></i>
                            </a>
                        <% } %>
                    </h2>
                </div>
                <!-- Breadcrumb -->
                <div id="bread-crumb" class="bread-crumb pull-right hide">
                  <a><i class="icon-home"></i> Home</a> 
                  <span class="path"></span>
                </div>
                <div class="clearfix">
                </div>
            </div>
            <!-- Page heading ends -->

            <!-- Matter -->
            <div class="matter">
                <div class="container-fluid">
                    <!-- spark line begins -->
                    <div class="row-fluid">
                        <div class="span12 spark-line" id="sparkline">
                            <div class="span4 bgreen">
                                <span>Customer Loyalty:</span>
                                <div class="pull-left">
                                    <img src="content/img/ov_loyalty.png" alt="Loyalty">
                                </div>
                                <div class="pull-right f24">
                                    <%= dashboard.getDateDiff(Details.RegisteredDate)%></div>
                                <div class="clearfix">
                                </div>
                            </div>
                            <div class="span4 blightblue">
                                <span>Life-time Revenue:</span>
                                <div class="pull-left">
                                    <img src="content/img/ov_coin.png" alt="Revenue">
                                </div>
                                <div class="pull-right">
                                    $<%= FinancialAccount.Revenue %></div>
                                <div class="clearfix">
                                </div>
                            </div>
                            <div class="span4 bred">
                                <span>Current Balance:</span>
                                <div class="pull-left">
                                    <!--img src="content/img/ov_balance.png" alt="Balance"-->
                                    <% var dotCount = FinancialAccount.Aging || 0; var blankDotCount = 5 - FinancialAccount.Aging || 0 %>
                                    <% for(var i=0; i< dotCount; i++) { %>
                                        <i class="icon-circle lightblue"></i>
                                    <% } %>
                                    <% for(var i=0; i< blankDotCount; i++) { %>
                                        <i class="icon-circle white"></i>
                                    <% } %>
                                </div>                                
                                <div class="pull-right">
                                    $<%= FinancialAccount.Balance%></div>
                                <div class="clearfix">
                                </div>
                            </div>
                            <div class="clearfix">
                            </div>
                        </div>
                    </div>
                    <!-- spark line ends -->
                    <div class="row-fluid">
                        <div class="span7">
                            <div class="widget worange">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Products (<%= Products.length%>)</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered  table-condensed">
                                        <tr>
                                            <th>
                                                Name
                                            </th>
                                            <th>
                                                Status
                                            </th>
                                            <th>
                                                Charged Until Date
                                            </th>
                                            <th>
                                                Last Change Date
                                            </th>
                                        </tr>
                                        <% for(var i=0,l=Products.length; i< l; i++) { %>
                                            <tr>
                                                <td>
                                                    <%= Products[i].Name %>
                                                </td>
                                                <td style="text-align: center">
                                                    <span class="label label-<%= dashboard.getLabelColor(Products[i].Status) %>"><%= Products[i].Status %></span>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(Products[i].ChargeUntilDate).format('MM/DD/YYYY') %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(Products[i].LastChangeDate).format('MM/DD/YYYY') %>
                                                </td>
                                            </tr>
                                       <% } %>
                                    </table>
                                </div>
                                <div class="widget-foot">
                                </div>
                            </div>
                        </div>
                        <div class="span5">
                            <div class="widget wviolet">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Current Offers (<%= CurrentOffers.length %>)</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered  table-condensed">
                                        <tr>
                                            <th>
                                                Product
                                            </th>
                                            <th>
                                                Description
                                            </th>
                                            <th>
                                                End Date
                                            </th>
                                        </tr>
                                        <% for(var i=0, l=CurrentOffers.length; i<l ; i++) { %>
                                            <tr>
                                                <td>
                                                    <%= CurrentOffers[i].Product %>
                                                </td>
                                                <td>
                                                    <%= CurrentOffers[i].Description %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(CurrentOffers[i].EndDate).format('MM/DD/YYYY') %>
                                                </td>
                                            </tr>
                                        <% } %>
                                    </table>
                                </div>
                            </div>
                            <div class="widget wlightblue">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Available Offers (<%= AvailableOffers.length %>)</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered table-condensed">
                                        <% for(var i=0,  l=AvailableOffers.length; i<l ; i++) { %>
                                            <tr>
                                                <td>
                                                    <%= AvailableOffers[i].Description %>
                                                </td>
                                                <td>
                                                    <a href="javascript:void(0)">Read More…</a>
                                                </td>
                                            </tr>
                                        <% } %>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span7">
                            <div class="widget wgreen">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Recent Product Changes</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered table-condensed">
                                        <tr>
                                            <th>
                                                Date
                                            </th>
                                            <th>
                                                Product
                                            </th>
                                            <th>
                                                Event
                                            </th>
                                            <th>
                                                Event Description
                                            </th>
                                        </tr>
                                        <% for(var i=0, l=ProductHistory.length; i<l; i++) { var  history = ProductHistory[i]; %>
                                            <tr>
                                                <td style="text-align: center">
                                                    <%= moment(history.Date).format('MM/DD/YYYY') %>
                                                </td>
                                                <td>
                                                    <%= history.ProductName %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= history.Event %>
                                                </td>
                                                <td>
                                                    <%= history.EventDescription %>
                                                </td>
                                            </tr>
                                        <% } %>
                                    </table>
                                </div>
                                <div class="widget-foot">
                                    <% if( ProductHistory.length > 5 ) {%>
                                        <div class="pagination pull-right">
                                            <ul>
                                                <li><a href="#">Prev</a></li>
                                                <li><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">Next</a></li>
                                            </ul>
                                        </div>
                                    <% } %>
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                            <div class="widget wred">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Pending Product Actions (<%= PendingProductActions.length %>)</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered table-condensed">
                                        <tr>
                                            <th>
                                                Product
                                            </th>
                                            <th>
                                                Action
                                            </th>
                                            <th>
                                                Action Date
                                            </th>
                                        </tr>
                                        <% for(var i=0, l=PendingProductActions.length; i<l; i++) { var action = PendingProductActions[i]; %>
                                            <tr>
                                                <td style="text-align: center">
                                                    <%= action.ProductName %>
                                                </td>
                                                <td>
                                                    <%= action.Action %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= action.ActionDate %>
                                                </td>
                                            </tr>
                                        <% } %>
                                    </table>
                                </div>
                                <div class="widget-foot">
                                    <div class="clearfix">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="span5">
                            <div class="widget wred">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        <a class="widget-link" href="#communication">Recent Communications</a></div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">                                    
                                    <table class="table table-bordered table-condensed">
                                        <tr>
                                            <th colspan="2">
                                                Type
                                            </th>
                                            <th>
                                                Date
                                            </th>
                                            <th>
                                                Description
                                            </th>
                                        </tr>
                                        <% for(var i=0, l=Communications.length; i<l; i++) { var contact = Communications[i]; %>
                                            <tr>
                                                <td style="text-align: center;">
                                                    <i class="<%= dashboard.getContactMethodIcon(contact.Type) %>"></i>
                                                </td>
                                                <td>
                                                    <%= contact.Type %>
                                                </td>
                                                <td>
                                                    <%= moment(contact.Date).format('MM/DD/YYYY') %>
                                                </td>
                                                <td>
                                                    <%= contact.Description %>
                                                </td>
                                            </tr>
                                        <% } %>
                                    </table>                                
                                </div>
                                <div class="widget-foot">
                                </div>
                            </div>
                            <div class="widget worange">
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Recent Payments</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered table-condensed">
                                        <tr>
                                            <th>
                                                Description
                                            </th>
                                            <th>
                                                Amount
                                            </th>
                                            <th>
                                                Creation Date
                                            </th>
                                            <th>
                                                Deposit Date
                                            </th>  
                                            <th>
                                                Invoice Paid
                                            </th>                                              
                                        </tr>
                                        <% for(var i=0, l=Payments.length; i<l; i++) { var payment = Payments[i]; %>
                                            <tr>
                                                <td>
                                                    <%= payment.Description %>
                                                </td>
                                                <td style="text-align: right">
                                                    $<%= payment.Amount %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(payment.CreationDate).format('MM/DD/YYYY') %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(payment.DepositDate).format('MM/DD/YYYY') %>
                                                </td> 
                                                <td style="text-align: center">
                                                    <%= payment.InvoicePaid %>
                                                </td>                  
                                            </tr>
                                        <% } %>
                                    </table>                                    
                                </div>
                                <div class="widget-foot">
                                </div>
                            </div>
                            <div class="widget wviolet">
                                <!-- Widget head -->
                                <div class="widget-head">
                                    <div class="pull-left">
                                        Recent Invoices</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                    <table class="table table-bordered table-condensed">
                                        <tr>
                                            <th>
                                                Invoice Number
                                            </th>
                                            <th>
                                                Amount
                                            </th>
                                            <th>
                                                Invoice Date
                                            </th>
                                            <th>
                                                Due Date
                                            </th>  
                                            <th>
                                                Amount Paid
                                            </th>                                              
                                        </tr>
                                        <% for(var i=0, l=Invoices.length; i<l; i++) { var invoice = Invoices[i]; %>
                                            <tr>
                                                <td style="text-align: center">
                                                    <%= invoice.InvoiceNumber %>
                                                </td>
                                                <td style="text-align: right">
                                                    $<%= invoice.Amount %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(invoice.InvoiceDate).format('MM/DD/YYYY') %>
                                                </td>
                                                <td style="text-align: center">
                                                    <%= moment(invoice.DueDate).format('MM/DD/YYYY') %>
                                                </td> 
                                                <td style="text-align: right">
                                                    $<%= invoice.AmountPaid %>
                                                </td>                  
                                            </tr>
                                        <% } %>
                                    </table>                                                                      
                                </div>
                                <div class="widget-foot">
                                </div>
                            </div>

                            <div class="widget wlightblue">
                                
                                <!-- Widget head -->
                                <div class="widget-head">
                                    <div class="pull-left">
                                        <a class="widget-link" href="#ft">Recent Transactions</a></div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a><a href="#" class="wclose">
                                            <i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix">
                                    </div>
                                </div>
                                <div class="widget-content referrer">
                                        <table class="table table-bordered table-condensed">
                                            <tr>
                                                <th>
                                                    Description
                                                </th>
                                                <th>
                                                    Amount
                                                </th>
                                                <th>
                                                    Period From
                                                </th>
                                                <th>
                                                    Period To
                                                </th>  
                                                <th>
                                                    Creation Date
                                                </th>  
                                                <th>
                                                    Invoice Number
                                                </th>                                                  
                                            </tr>
                                            <% for(var i=0, l=FinancialTransactions.length; i<l; i++) { var ft = FinancialTransactions[i]; %>
                                                <tr>
                                                    <td>
                                                        <%= ft.Description %>
                                                    </td>
                                                    <td style="text-align: right">
                                                        $<%= ft.Amount %>
                                                    </td>
                                                    <td style="text-align: center">
                                                        <%= moment(ft.FromDate).format('MM/DD/YYYY') %>
                                                    </td>
                                                    <td style="text-align: center">
                                                        <%= moment(ft.ToDate).format('MM/DD/YYYY') %>
                                                    </td>  
                                                    <td style="text-align: center">
                                                        <%= moment(ft.CreationDate).format('MM/DD/YYYY') %>
                                                    </td>                                                      
                                                    <td style="text-align: center">
                                                        <%= ft.InvoiceNumber %>
                                                    </td>                 
                                                </tr>
                                            <% } %>
                                        </table> 
                                    </div>

                                <div class="widget-foot">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Matter ends -->
            </div>
            <!-- Mainbar ends -->
            <div class="clearfix">
            </div>
        </script>

        <script type="text/template" id="addressDetailTemplate">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Address</h3>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row-fluid">
                        <div class="span12"><%= Address.AddressLine1 %></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12"><%= Address.AddressLine2 %></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6"><strong>Mobile phone:</strong></div>
                        <div class="span6"><%= Address.Mobile %></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6"><strong>Land line phone:</strong></div>
                        <div class="span6"><%= Address.HomePhone %></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span6"><strong>Email:</strong></div>
                        <div class="span6"><%= Address.Email %></div>
                    </div>
                </div>                
            </div>
            <div class="modal-footer">
                <button id="btnCloseAddress" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </script>

        <script type="text/template" id="communicationTemplate">
            
            <div class="container-fluid">
                <div class="widget wgreen">           
                    <div class="widget-head">
                        <div class="pull-left">
                            Communications
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="widget-content referrer">
                        <table class="table table-bordered">
                            <tr>
                                <th colspan="2">
                                    Type
                                </th>
                                <th>
                                    Date
                                </th>
                                <th>
                                    Description
                                </th>
                            </tr>
                            <% for(var i=0, l=Communications.length; i<l; i++) { var contact = Communications[i]; %>
                                <tr>
                                    <td style="text-align: center;">
                                        <i class="<%= dashboard.getContactMethodIcon(contact.Type) %>"></i>
                                    </td>
                                    <td>
                                        <%= contact.Type %>
                                    </td>
                                    <td style="text-align: center">
                                        <%= moment(contact.Date).format('MM/DD/YYYY') %>
                                    </td>
                                    <td>
                                        <%= contact.Description %>
                                    </td>
                                </tr>
                            <% } %>
                        </table> 
                    </div>  
                    <div class="widget-foot">
                        <div class="pagination pull-right">
                            <ul>
                                <li><a>Prev</a></li>
                                <li><a>1</a></li>
                                <li><a>2</a></li>
                                <li><a>3</a></li>
                                <li><a>4</a></li>
                                <li><a>Next</a></li>
                            </ul>
                        </div>  
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>

        </script>


        <script type="text/template" id="financialTransactionsTemplate">

            <div class="container-fluid">
                <div class="widget wgreen">           
                    <div class="widget-head">
                        <div class="pull-left">
                            Transactions
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="widget-content referrer">
                        <table class="table table-bordered">
                            <tr>
                                <th>
                                    Description
                                </th>
                                <th>
                                    Amount
                                </th>
                                <th>
                                    Period From
                                </th>
                                <th>
                                    Period To
                                </th>  
                                <th>
                                    Creation Date
                                </th>                                                        
                                <th>
                                    Invoice Number
                                </th>
                            </tr>
                            <% for(var i=0, l=FinancialTransactions.length; i<l; i++) { var ft = FinancialTransactions[i]; %>
                                <tr>
                                    <td>
                                        <%= ft.Description %>
                                    </td>
                                    <td style="text-align: right">
                                        $<%= ft.Amount %>
                                    </td>
                                    <td style="text-align: center">
                                        <%= moment(ft.FromDate).format('MM/DD/YYYY') %>
                                    </td>
                                    <td style="text-align: center">
                                        <%= moment(ft.ToDate).format('MM/DD/YYYY') %>
                                    </td>                   
                                    <td style="text-align: center">
                                        <%= moment(ft.CreationDate).format('MM/DD/YYYY') %>
                                    </td>
                                    <td style="text-align: center">
                                        <%= ft.InvoiceNumber %>
                                    </td>
                                </tr>
                            <% } %>
                        </table> 
                    </div>  
                    <div class="widget-foot">
                        <div class="pagination pull-right">
                            <ul>
                                <li><a>Prev</a></li>
                                <li><a>1</a></li>
                                <li><a>2</a></li>
                                <li><a>3</a></li>
                                <li><a>4</a></li>
                                <li><a>Next</a></li>
                            </ul>
                        </div> 
                        <div class="clearfix"></div>               
                    </div>
                </div>
            </div>

        </script>

        <!-- JS -->
        <script src="js/lib/underscore-min.js"></script>
        <script src="js/lib/moment.min.js"></script>
        <script src="js/lib/jquery.js"></script>        
        <script type="text/javascript" src="js/lib/backbone-min.js"></script>

        <script src="js/lib/bootstrap.js"></script>
        <!--script src="js/jquery-ui-1.10.2.custom.min.js"></script-->
        <script type="text/javascript" src="js/lib/jquery-ui-1.10.3.js"></script>
        <script src="js/lib/fullcalendar.min.js"></script>
        <!-- Full Google Calendar - Calendar -->
        <script src="js/lib/jquery.rateit.min.js"></script>
        <script src="js/lib/sparklines.js"></script>
        <script src="js/lib/jquery.gritter.min.js"></script>

        <script src="js/lib/bootstrap-datetimepicker.min.js"></script>
        <script src="js/lib/jquery.toggle.buttons.js"></script>
        <script type="text/javascript" src="js/app/fakedata.js"></script>
        <script src="js/app/custom.js"></script>
        <!-- Custom codes -->
        <script src="js/app/dashboard.js"></script>
        <script type="text/javascript" src="js/app/app.js"></script>
</body>
</html>
